<template>
  <view class="page-wrapper ticket-booking-page page">
    <div class="page-title">确认 Confirm</div>
    <div class="wrap">
      <div class="title">
        {{ info.name }}
        <br />
        {{ info.enName }}
      </div>
      <div class="te">{{ info.address }} {{ info.enAddress }}</div>
      <div class="te">{{ formatDay }} {{ formatWeek }}</div>
      <div class="te">
        {{ info.activityPrice.name }} {{ info.activityPrice.enName }} ¥{{ info.activityPrice.price }}
      </div>
      <div class="te">x{{ info.quantity }}</div>
      <div class="title">支付方式 Payment Method</div>
      <div class="te">微信支付 Wechat Pay</div>
    </div>
    <div class="bottom-control-box">
      <div class="bottom-control-container">
        <div class="wrap">
          <div class="total-price">
            <text>
              ¥
              {{ roundNumber(info.activityPrice.price * info.quantity, 2) }}
            </text>
          </div>
          <div class="book-button" @click="confirmPay">支付 Pay</div>
        </div>
        <div :style="{ height: bottomSafeArea + 'px' }"></div>
      </div>
      <div class="place" :style="{ height: `calc(${bottomSafeArea}px + 100rpx)` }"></div>
    </div>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { getWeekDay } from '@/utils/current'
import { roundNumber } from '@/utils/reg'
import { saveOrder, payOrder } from '@/utils/api/order'
const store = useStore()
const bottomSafeArea = computed(() => store.getters['system/bottomSafeArea'])
const isVip = computed(() => store.getters['user/isVip'])
let count = ref<number>(1)
const valChange = (val: number) => {
  console.log('数量变化', val)
}
let info = ref<any>({})

const formatDay = computed(() => {
  let time = info.value.agreementTime
  return time ? time.split('-').reverse().join('.') : ''
})
const formatWeek = computed(() => {
  let time = info.value.agreementTime
  let { cn, en } = time ? getWeekDay(time) : { cn: '', en: '' }
  return `${cn} ${en}`
})

// 生成订单
const confirmPay = async () => {
  console.log('确认购买生成订单')
  interface Params {
    index: number
    tabIndex: number
  }

  let params: Params = {
    index: 3,
    tabIndex: 1
  }

  let obj = {}
  obj.activityPriceId = info.value.activityPriceId
  obj.agreementTime = info.value.agreementTime
  obj.period = `${info.value.period[0]}- ${info.value.period[1]}`
  obj.objectId = info.value.objectId
  obj.quantity = info.value.quantity
  obj.type = 3

  const { code, data } = await saveOrder(obj)
  if (code !== 200) return
  const payRes = await payOrder({
    orderId: data.orderId,
    payType: 1
  })
  if (payRes.code !== 200) return
  let payData = JSON.parse(payRes.data)
  console.log('支付参数', payData)
  wx.requestPayment({
    timeStamp: payData.timestamp,
    nonceStr: payData.noncestr,
    package: payData.package,
    signType: payData.signType,
    paySign: payData.paySign,
    success: function (res) {
      if (res.errMsg == 'requestPayment:ok') {
        console.log('支付成功', res)
        uni.reLaunch({
          url: `/pages/index/index?params=${JSON.stringify(params)}`
        })
      } else {
        setTimeout(() => {
          uni.showToast({
            title: '支付失败',
            icon: 'none'
          })
        }, 100)
        uni.reLaunch({
          url: `/pages/index/index?params=${JSON.stringify(params)}`
        })
      }
    },
    fail(res) {
      setTimeout(() => {
        uni.showToast({
          title: '支付失败',
          icon: 'none'
        })
      }, 100)
      uni.reLaunch({
        url: `/pages/index/index?params=${JSON.stringify(params)}`
      })
    }
  })
}

onLoad((opt) => {
  if (opt && opt.params) {
    info.value = JSON.parse(opt.params)
    console.log('接收参数', info.value)
  }
})
</script>

<style lang="scss" scoped>
@import '../ticketBooking/ticketBooking.scss';
</style>
